<!-- Font Awesome CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/font-awesome.min.css'>
<!---Bootstrap CSS-->
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/bootstrap-theme.min.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/datepicker.css'>
<!-- App CSS -->
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-admin-belize.css'>
<link rel='stylesheet' href='/lib/bootstrap/css/mvpready-flat.css'>

<!--BootStrap JavaScript-->
<script src='/lib/bootstrap/js/bootstrap.min.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/jquery.bootstrap.wizard.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootbox.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-datepicker.js' type="text/javascript"></script>
<script src='/lib/bootstrap/js/bootstrap-typeahead.js' type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("#myTab a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#sortTabU a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#sortTabQ a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $("#sortTabA a").click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
<script src="/js/utility/FileSaver.min.js" type="text/javascript"></script>
<style>
    table td, table th {
        vertical-align: middle;
        height: 50px;
        text-align: center;
        font-size: 14px;
    }
</style>
<div>
    <h2 align="center" style="font-weight: bold"><span class="glyphicon glyphicon-star"></span>Top Ranking: Users,
        Questions, Activities<span class="glyphicon glyphicon-star"></span></h2>

    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a data-toggle="tab" href="#users" ng-click="initPageUsers()">Users</a></li>
        <li><a data-toggle="tab" href="#questions" ng-click="initPageQuestions()">Questions</a></li>
        <li><a data-toggle="tab" href="#activities" ng-click="initPageActivities()">Activities</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane active" id="users">

            <h3 align="center" style="font-weight: bold">Top {{numPerPageU}} Users</h3>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">小区名称:</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="communityU"
                            ng-change="getTopUsersData(communityU)">
                        <option value="">全部</option>
                    </select><br/>
                    <label class="control-label">Ranked By:</label>
                    <select ng-options="f as fd for (f, fd) in filterListU" ng-model="filterU"
                            ng-change="getTopUsersData(communityU)">
                    </select>&nbsp;
                    <label class="control-label">Users Per Page:</label>
                    <select ng-options="n for n in numPerPageList" ng-model="numPerPageU"
                            ng-change="getTopUsersData(communityU)" style="width: 50px">
                    </select>
                </form>
            </div>

            <div class="tabbable">
                <div class="tab-content">
                    <span id="loadingTextU" style="color: red"></span><br/>
                    <button ng-click="exportData()">Export</button>

                    <div id="exportableU">
                        <p style="font-weight: bold" align="right">Ranked by {{filterListU[filterU]}}</p>
                        <table class="table table-condensed">
                            <thead>
                            <tr id="sortTabU">
                                <th>
                                    <a href="#" ng-click="orderByFieldU='rank'; reverseSortU = !reverseSortU">
                                        Rank
                            <span ng-show="orderByFieldU == 'rank'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='communityName'; reverseSortU = !reverseSortU">
                                        小区
                            <span ng-show="orderByFieldU == 'communityName'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th width="15%">
                                    <a href="#" ng-click="orderByFieldU='nickName'; reverseSortU = !reverseSortU">
                                        User NickName
                            <span ng-show="orderByFieldU == 'nickName'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='uid'; reverseSortU = !reverseSortU">
                                        User Id
                            <span ng-show="orderByFieldU == 'uid'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='timeCreated'; reverseSortU = !reverseSortU">
                                        Date Created
                            <span ng-show="orderByFieldU == 'timeCreated'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='daysActive'; reverseSortU = !reverseSortU">
                                        Days Active
                            <span ng-show="orderByFieldU == 'daysActive'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='questions'; reverseSortU = !reverseSortU">
                                        发布数
                            <span ng-show="orderByFieldU == 'questions'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='replies'; reverseSortU = !reverseSortU">
                                        回复数
                            <span ng-show="orderByFieldU == 'replies'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='activities'; reverseSortU = !reverseSortU">
                                        活动发布数
                            <span ng-show="orderByFieldU == 'activities'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldU='contribution'; reverseSortU = !reverseSortU">
                                        贡献
                            <span ng-show="orderByFieldU == 'contribution'">
                            <span ng-show="!reverseSortU">^</span><span ng-show="reverseSortU">v</span></span></a>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="tu in topUsers|orderBy:orderByFieldU:reverseSortU">
                                <td>{{tu.rank}}</td>
                                <td>{{tu.communityName}}</td>
                                <td>{{tu.nickName}}</td>
                                <td>{{tu.uid}}</td>
                                <td>{{tu.timeCreated}}</td>
                                <td>{{tu.daysActive}}</td>
                                <td>{{tu.questions}}</td>
                                <td>{{tu.replies}}</td>
                                <td>{{tu.activities}}</td>
                                <td>{{tu.contribution}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="tab-pane" id="questions">
            <h3 align="center" style="font-weight: bold">Top {{numPerPageQ}} Questions</h3>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">小区名称:</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="communityQ"
                            ng-change="getTopQuestionsData(communityQ)">
                        <option value="">全部</option>
                    </select><br/>
                    <label class="control-label">Ranked By:</label>
                    <select ng-options="f as fd for (f, fd) in filterListQ" ng-model="filterQ"
                            ng-change="getTopQuestionsData(communityQ)" style="width: 80px">
                    </select>&nbsp;
                    <label class="control-label">Questions Per Page:</label>
                    <select ng-options="n for n in numPerPageList" ng-model="numPerPageQ"
                            ng-change="getTopQuestionsData(communityQ)" style="width: 50px">
                    </select>
                </form>
            </div>

            <div class="tabbable">
                <div class="tab-content">

                    <div>
                        <span id="loadingTextQ" style="color: red"></span><br/>
                    </div>

                    <button ng-click="exportData()">Export</button>

                    <div id="exportableQ">
                        <p style="font-weight: bold" align="right">Ranked by {{filterListQ[filterQ]}}</p>
                        <table class="table table-condensed">
                            <thead>
                            <tr id="sortTabQ">
                                <th>
                                    <a href="#" ng-click="orderByFieldQ='rank'; reverseSortQ = !reverseSortQ">
                                        Rank
                            <span ng-show="orderByFieldQ == 'rank'">
                            <span ng-show="!reverseSortQ">^</span><span ng-show="reverseSortQ">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldQ='communityName'; reverseSortQ = !reverseSortQ">
                                        Community Name
                            <span ng-show="orderByFieldQ == 'communityName'">
                            <span ng-show="!reverseSortQ">^</span><span ng-show="reverseSortQ">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldQ='category'; reverseSortQ = !reverseSortQ">
                                        Category
                            <span ng-show="orderByFieldQ == 'category'">
                            <span ng-show="!reverseSortQ">^</span><span ng-show="reverseSortQ">v</span></span></a>
                                </th>
                                <th width="60%">
                                    <a href="#" ng-click="orderByFieldQ='desc'; reverseSortQ = !reverseSortQ">
                                        描述
                            <span ng-show="orderByFieldQ == 'desc'">
                            <span ng-show="!reverseSortQ">^</span><span ng-show="reverseSortQ">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldQ='browserCount'; reverseSortQ = !reverseSortQ">
                                        浏览量
                            <span ng-show="orderByFieldQ == 'browserCount'">
                            <span ng-show="!reverseSortQ">^</span><span ng-show="reverseSortQ">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldQ='replyCount'; reverseSortQ = !reverseSortQ">
                                        回复数
                            <span ng-show="orderByFieldQ == 'replyCount'">
                            <span ng-show="!reverseSortQ">^</span><span ng-show="reverseSortQ">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldQ='dateCreated'; reverseSortQ = !reverseSortQ">
                                        Date Created
                            <span ng-show="orderByFieldQ == 'dateCreated'">
                            <span ng-show="!reverseSortQ">^</span><span ng-show="reverseSortQ">v</span></span></a>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="tq in topQuestions|orderBy:orderByFieldQ:reverseSortQ">
                                <td>{{tq.rank}}</td>
                                <td>{{tq.communityName}}</td>
                                <td>{{tq.categoryName}}</td>
                                <td>{{tq.desc}}</td>
                                <td>{{tq.browserCount}}</td>
                                <td>{{tq.replyCount}}</td>
                                <td>{{tq.dateCreated}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane" id="activities">
            <h3 align="center" style="font-weight: bold">Top {{numPerPageA}} Activities</h3>

            <div class="form-group" style="margin-top: 20px;">
                <form>
                    <label class="control-label">小区名称:</label>
                    <select ng-options="m.objId as m.communityName for m in communityList" ng-model="communityA"
                            ng-change="getTopActivitiesData(communityA)">
                        <option value="">全部</option>
                    </select><br/>
                    <label class="control-label">Ranked By:</label>
                    <select ng-options="f as fd for (f, fd) in filterListA" ng-model="filterA"
                            ng-change="getTopActivitiesData(communityA)" style="width: 80px">
                    </select>&nbsp;
                    <label class="control-label">Activities Per Page:</label>
                    <select ng-options="n for n in numPerPageList" ng-model="numPerPageA"
                            ng-change="getTopActivitiesData(communityA)" style="width: 50px">
                    </select>
                </form>
            </div>

            <div class="tabbable">
                <div class="tab-content">

                    <div>
                        <span id="loadingTextA" style="color: red"></span><br/>
                    </div>

                    <button ng-click="exportData()">Export</button>

                    <div id="exportableA">
                        <p style="font-weight: bold" align="right">Ranked by {{filterListA[filterA]}}</p>
                        <table class="table table-condensed">
                            <thead>
                            <tr id="sortTab">
                                <th>
                                    <a href="#" ng-click="orderByFieldA='rank'; reverseSortA = !reverseSortA">
                                        Rank
                            <span ng-show="orderByFieldA == 'rank'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldA='communityName'; reverseSortA = !reverseSortA">
                                        Community Name
                            <span ng-show="orderByFieldA == 'communityName'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldA='actId'; reverseSortA = !reverseSortA">
                                        Activity Id
                            <span ng-show="orderByFieldA == 'actId'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldA='title'; reverseSortA = !reverseSortA">
                                        Activity Title
                            <span ng-show="orderByFieldA == 'title'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldA='partakeNum'; reverseSortA = !reverseSortA">
                                        参加人数
                            <span ng-show="orderByFieldA == 'partakeNum'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldA='browserCount'; reverseSortA = !reverseSortA">
                                        浏览量
                            <span ng-show="orderByFieldA == 'browserCount'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldA='replyCount'; reverseSortA = !reverseSortA">
                                        回复数
                            <span ng-show="orderByFieldA == 'replyCount'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                                <th>
                                    <a href="#" ng-click="orderByFieldA='dateCreated'; reverseSortA = !reverseSortA">
                                        Date Created
                            <span ng-show="orderByFieldA == 'dateCreated'">
                            <span ng-show="!reverseSortA">^</span><span ng-show="reverseSortA">v</span></span></a>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="ta in topActivities|orderBy:orderByFieldA:reverseSortA">
                                <td>{{ta.rank}}</td>
                                <td>{{ta.communityName}}</td>
                                <td>{{ta.actId}}</td>
                                <td>{{ta.title}}</td>
                                <td>{{ta.partakeNum}}</td>
                                <td>{{ta.browserCount}}</td>
                                <td>{{ta.replyCount}}</td>
                                <td>{{ta.dateCreated}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
